<template>
    <div class="">
        <div :id="props.echartsName" style="width:100%;" :style="{height: props._h}"></div>
    </div>
</template>
<script setup>

import * as echarts from "echarts";

import { onMounted, onUnmounted, watchEffect, ref } from "vue";
import { events } from '@/utils/bus.js'

let myEcharts = echarts;
const props = defineProps({
    _h:{
        type:String,
        default:"4rem"
    },
    optionsData:{
        type:Object,
        default:()=>{}
    },
    echartsName:{
        type:String,
        default:""
    }
})

let chart = null

let options=ref({})

const initChart = () => {
    chart = myEcharts.init(document.getElementById(props.echartsName), "purple-passion");
    if(options.value && chart){
        chart.setOption(options.value);
    }
}
watchEffect(() => {
    options.value = props.optionsData
    
})

onMounted(() => {
    initChart();
    events.on('resizeWin', function () {
        chart.resize();
        console.log(66)
    })
});

</script>
<style lang="scss" scoped></style>
  